home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2006 May / PCWMAY06.iso / Software / Freeware / First Page 2006 3.00 / fp2006-final-3.00-setup.exe / {app} / Iscripts / DHTML - Image Galleries / image-thumbnail-viewer.izs < prev    next >
Text File  |  2005-09-01  |  8KB  |  226 lines
  1. <!NOWIZARD>
  2.  
  3. <!TITLE>Image Thumbnail Viewer
  4. <!/TITLE>
  5.  
  6. <!BROWSER>FF1+ IE5+ Opr7+<!/BROWSER>
  7.  
  8. <!DESCRIPTION>Prior to DHTML, viewing the images behind the thumbnails meant displaying them in their own browser window (by setting a URL to the image's path), which interrupts your visitor's browsing experience. This cool DHTML script allows you to show images inline on the page, with the images downloaded only when called. The displayed image is dragable, so the user can adjust its position dynamically. Browsers other than IE 4+ and NS 6+ will automatically resort to the old method of displaying the images- in their own browser window. What else could you ask for in a thumbnail viewer?
  9. <!/DESCRIPTION> 
  10.  
  11. <!CATEGORY>image galleries<!/CATEGORY>
  12.  
  13. <!SCRIPT>
  14. <!-- START OF SCRIPT -->
  15. <!-- Step 1: Add the following code to the <head> section of your page: -->
  16. <style type="text/css">
  17.  
  18. #showimage{
  19. position:absolute;
  20. visibility:hidden;
  21. border: 1px solid gray;
  22. }
  23.  
  24. #dragbar{
  25. cursor: hand;
  26. cursor: pointer;
  27. background-color: #EFEFEF;
  28. min-width: 100px; /*NS6 style to overcome bug*/
  29. }
  30.  
  31. #dragbar #closetext{
  32. font-weight: bold;
  33. margin-right: 1px;
  34. }
  35. </style>
  36.  
  37. <script type="text/javascript">
  38.  
  39. /***********************************************
  40. * Image Thumbnail viewer- ⌐ Dynamic Drive (www.dynamicdrive.com)
  41. * Last updated Sept 26th, 03'. This notice must stay intact for use
  42. * Visit http://www.dynamicdrive.com/ for full source code
  43. ***********************************************/
  44.  
  45. var ie=document.all
  46. var ns6=document.getElementById&&!document.all
  47.  
  48. function ietruebody(){
  49. return (document.compatMode && document.compatMode!="BackCompat" && !window.opera)? document.documentElement : document.body
  50. }
  51.  
  52. function enlarge(which, e, position, imgwidth, imgheight){
  53. if (ie||ns6){
  54. crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage
  55. if (position=="center"){
  56. pgyoffset=ns6? parseInt(pageYOffset) : parseInt(ietruebody().scrollTop)
  57. horzpos=ns6? pageXOffset+window.innerWidth/2-imgwidth/2 : ietruebody().scrollLeft+ietruebody().clientWidth/2-imgwidth/2
  58. vertpos=ns6? pgyoffset+window.innerHeight/2-imgheight/2 : pgyoffset+ietruebody().clientHeight/2-imgheight/2
  59. if (window.opera && window.innerHeight) //compensate for Opera toolbar
  60. vertpos=pgyoffset+window.innerHeight/2-imgheight/2
  61. vertpos=Math.max(pgyoffset, vertpos)
  62. }
  63. else{
  64. var horzpos=ns6? pageXOffset+e.clientX : ietruebody().scrollLeft+event.clientX
  65. var vertpos=ns6? pageYOffset+e.clientY : ietruebody().scrollTop+event.clientY
  66. }
  67. crossobj.style.left=horzpos+"px"
  68. crossobj.style.top=vertpos+"px"
  69.  
  70. crossobj.innerHTML='<div align="right" id="dragbar"><span id="closetext" onClick="closepreview()">Close</span> </div><img src="'+which+'">'
  71. crossobj.style.visibility="visible"
  72. return false
  73. }
  74. else //if NOT IE 4+ or NS 6+, simply display image in full browser window
  75. return true
  76. }
  77.  
  78. function closepreview(){
  79. crossobj.style.visibility="hidden"
  80. }
  81.  
  82. function drag_drop(e){
  83. if (ie&&dragapproved){
  84. crossobj.style.left=tempx+event.clientX-offsetx+"px"
  85. crossobj.style.top=tempy+event.clientY-offsety+"px"
  86. }
  87. else if (ns6&&dragapproved){
  88. crossobj.style.left=tempx+e.clientX-offsetx+"px"
  89. crossobj.style.top=tempy+e.clientY-offsety+"px"
  90. }
  91. return false
  92. }
  93.  
  94. function initializedrag(e){
  95. if (ie&&event.srcElement.id=="dragbar"||ns6&&e.target.id=="dragbar"){
  96. offsetx=ie? event.clientX : e.clientX
  97. offsety=ie? event.clientY : e.clientY
  98.  
  99. tempx=parseInt(crossobj.style.left)
  100. tempy=parseInt(crossobj.style.top)
  101.  
  102. dragapproved=true
  103. document.onmousemove=drag_drop
  104. }
  105. }
  106.  
  107. document.onmousedown=initializedrag
  108. document.onmouseup=new Function("dragapproved=false")
  109.  
  110. </script>
  111. <!-- Step 2: Add the following <div> tag to your <body>. This tag is used to contain the displayed images:-->
  112. <div id="showimage"></div>
  113. <!-- Step 3: Lastly, setup either thumbnail images or text links in which to load the actual images from (like in demo above). The code to add within the <a> tag of your image thumbnail or text link is the following:
  114.  
  115. onClick="return enlarge('myimage.gif',event, 'center', imagewidth, imageheight)"Enter the full path to the image in question for the first parameter. The final three parameters are optional (starting with "center"), and should only be set if you wish the enlarged image to be centered on the page. -->
  116. <!-- END OF SCRIPT -->
  117. <!/SCRIPT>
  118.  
  119. <!PREVIEW>
  120. <!-- START OF SCRIPT -->
  121.  
  122. <!-- Step 1: Add the following code to the <head> section of your page: -->
  123. <style type="text/css">
  124.  
  125. #showimage{
  126. position:absolute;
  127. visibility:hidden;
  128. border: 1px solid gray;
  129. }
  130.  
  131. #dragbar{
  132. cursor: hand;
  133. cursor: pointer;
  134. background-color: #EFEFEF;
  135. min-width: 100px; /*NS6 style to overcome bug*/
  136. }
  137.  
  138. #dragbar #closetext{
  139. font-weight: bold;
  140. margin-right: 1px;
  141. }
  142. </style>
  143.  
  144. <script type="text/javascript">
  145.  
  146. /***********************************************
  147. * Image Thumbnail viewer- ⌐ Dynamic Drive (www.dynamicdrive.com)
  148. * Last updated Sept 26th, 03'. This notice must stay intact for use
  149. * Visit http://www.dynamicdrive.com/ for full source code
  150. ***********************************************/
  151.  
  152. var ie=document.all
  153. var ns6=document.getElementById&&!document.all
  154.  
  155. function ietruebody(){
  156. return (document.compatMode && document.compatMode!="BackCompat" && !window.opera)? document.documentElement : document.body
  157. }
  158.  
  159. function enlarge(which, e, position, imgwidth, imgheight){
  160. if (ie||ns6){
  161. crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage
  162. if (position=="center"){
  163. pgyoffset=ns6? parseInt(pageYOffset) : parseInt(ietruebody().scrollTop)
  164. horzpos=ns6? pageXOffset+window.innerWidth/2-imgwidth/2 : ietruebody().scrollLeft+ietruebody().clientWidth/2-imgwidth/2
  165. vertpos=ns6? pgyoffset+window.innerHeight/2-imgheight/2 : pgyoffset+ietruebody().clientHeight/2-imgheight/2
  166. if (window.opera && window.innerHeight) //compensate for Opera toolbar
  167. vertpos=pgyoffset+window.innerHeight/2-imgheight/2
  168. vertpos=Math.max(pgyoffset, vertpos)
  169. }
  170. else{
  171. var horzpos=ns6? pageXOffset+e.clientX : ietruebody().scrollLeft+event.clientX
  172. var vertpos=ns6? pageYOffset+e.clientY : ietruebody().scrollTop+event.clientY
  173. }
  174. crossobj.style.left=horzpos+"px"
  175. crossobj.style.top=vertpos+"px"
  176.  
  177. crossobj.innerHTML='<div align="right" id="dragbar"><span id="closetext" onClick="closepreview()">Close</span> </div><img src="'+which+'">'
  178. crossobj.style.visibility="visible"
  179. return false
  180. }
  181. else //if NOT IE 4+ or NS 6+, simply display image in full browser window
  182. return true
  183. }
  184.  
  185. function closepreview(){
  186. crossobj.style.visibility="hidden"
  187. }
  188.  
  189. function drag_drop(e){
  190. if (ie&&dragapproved){
  191. crossobj.style.left=tempx+event.clientX-offsetx+"px"
  192. crossobj.style.top=tempy+event.clientY-offsety+"px"
  193. }
  194. else if (ns6&&dragapproved){
  195. crossobj.style.left=tempx+e.clientX-offsetx+"px"
  196. crossobj.style.top=tempy+e.clientY-offsety+"px"
  197. }
  198. return false
  199. }
  200.  
  201. function initializedrag(e){
  202. if (ie&&event.srcElement.id=="dragbar"||ns6&&e.target.id=="dragbar"){
  203. offsetx=ie? event.clientX : e.clientX
  204. offsety=ie? event.clientY : e.clientY
  205.  
  206. tempx=parseInt(crossobj.style.left)
  207. tempy=parseInt(crossobj.style.top)
  208.  
  209. dragapproved=true
  210. document.onmousemove=drag_drop
  211. }
  212. }
  213.  
  214. document.onmousedown=initializedrag
  215. document.onmouseup=new Function("dragapproved=false")
  216.  
  217. </script>
  218. <!-- Step 2: Add the following <div> tag to your <body>. This tag is used to contain the displayed images:-->
  219. <div id="showimage"></div>
  220. <!-- Step 3: Lastly, setup either thumbnail images or text links in which to load the actual images from (like in demo above). The code to add within the <a> tag of your image thumbnail or text link is the following:
  221.  
  222. onClick="return enlarge('myimage.gif',event, 'center', imagewidth, imageheight)"Enter the full path to the image in question for the first parameter. The final three parameters are optional (starting with "center"), and should only be set if you wish the enlarged image to be centered on the page. -->
  223. <!-- END OF SCRIPT -->
  224. <!/PREVIEW>
  225.  
  226. <!RELATED>NONE<!/RELATED>